<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id="title">html5 audio MusicPlayer</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none; font-size:12px; line-height:1.8; font-family:Arial;color:#333;}
.clear { clear:both}
body { background:#f5f5f5;}
.music_player {display:block;width:360px;margin:50px auto;border:1px solid #ccc;border-radius:3px;}
.music_player audio { display:block;height:0; overflow:hidden;}

.music_player_btns {clear:both;margin:5px;}
.music_player_btns span { padding:2px 10px;background:#ccc;cursor:pointer;border-radius:5px;}
.music_player_btns span.now,.music_player_btns span:hover { background:#069;color:#fff;}
.music_player_volume { float:left;width:48%;}
.music_player_volume strong { float:left; padding:0 5px}
.music_player_volume span {background:#ccc; height:5px; display:block;width:100px; overflow:hidden; margin-top:9px;border-radius:3px;cursor:pointer}
.music_player_volume span em { display:block; height:5px; background:#069;}
.music_player_muted { float:left;cursor:pointer}
.music_player_muted span { text-decoration:line-through;color:#999}

.music_player_prog_data { text-align:center}
.music_player_desc { background:#069;border-bottom:2px solid #fff;color:#fff;padding:3px;}
.music_player_prog {height:5px; overflow:hidden; background:#ccc;border-radius:3px;cursor:pointer;margin:0 5px;}
.music_player_prog em { background:#069; line-height:90px; display:block;}

.music_player_songs {background:#fff;border-top:1px solid #ccc}
.music_player_songs a {display:block;text-decoration:none;padding:1px 5px}
.music_player_songs a:hover { background:#069;color:#fff;}
.music_player_songs li {border-bottom:1px solid #fff;}
.music_player_songs li.now {background:#069;}
.music_player_songs li.now a {color:#fff;}
.music_player_lrc { display:block; height:200px; overflow:hidden;padding:5px;border-top:2px solid #069; position:relative;}
.music_player_lrc li {color:#069; height:25px; overflow:hidden;clear:both;}
.music_player_lrc li em { display:block;width:0; overflow:hidden; margin-right:10px; float:left;}
.music_player_lrc li.now { background:#069;color:#fff}
</style>
</head>
<body>

<section id="music_player" class="music_player">
	<audio id="musicBox" autoplay="true" src="http://gltv.gltvs.com/broadcasting_station/music/shanrong.mp3" title="陈淑桦 -- 流光飞舞" onended="playEnd()" onerror="playNext()" ontimeupdate="showProg()" onplay="playStart()" volume="1.0"></audio>
		
	<section id="music_player_ctrl" class="music_player_ctrl">
		<p id="music_player_desc" class="music_player_desc">正在播放的是：陈淑桦 -- 流光飞舞</p>
		<p id="music_player_prog" class="music_player_prog"><em style="width:1px">进度条</em></p>
		<p id="music_player_prog_data" class="music_player_prog_data">00:00/00:00</p>
		<p>
			<span id="music_player_volume" class="music_player_volume">
				<strong>音量控制:</strong><span><em style="width:100%"></em></span>
			</span>
			<span id="music_player_muted" class="music_player_muted">静音</span>
			<br style="clear:both" />
		</p>
		<section class="music_player_btns">
			<span id="MusicPrew" class="prew">上首</span>
			<span id="MusicPlay" class="play">暂停</span>
			<span id="MusicNext" class="next">下首</span>	
			<span id="MusicCircle" class="circle now">循环播放</span>	
			<span id="MusicSingle" class="single">单曲循环</span>
		</section>	
	</section>
	<ul class="music_player_songs" id="music_player_songs">
		<li><a href="http://gltv.gltvs.com/broadcasting_station/music/shanrong.mp3" lang="liuguang.txt">陈淑桦 -- 流光飞舞</a></li>
		<li><a href="http://www.xuwenguo.com/image/content/mp3/yang.mp3">黄龄 -- 痒</a></li>
		<li><a href="http://www.cfrb.cn/images/2007-05/09/530504091510703162353.mp3">林忆莲 -- 爱上一个不回家的人</a></li><!--
		<li><a href="http://persian.cri.cn/mmsource/audio/2004/03/26/weiniwosshoulengfengchui.mp3">林忆莲 -- 为你我受冷风吹</a></li>-->
		<li><a href="http://www.0517jia.com/wen.mp3">林忆莲 -- 问</a></li>
		<li><a href="http://61.128.110.8/images/10/05/13/qy84rmai41/128909fbf71.mp3">辛晓琪 -- 领悟</a></li>
	</ul>
	<section id="music_player_lrc" class="music_player_lrc">
		<ul>
		  <li>流光飞舞 -- 陈淑桦</li>
		  <li><em>00:01</em>陈淑桦：流光飞舞</li>
		  <li><em>00:22</em>半冷半暖秋天</li>
		  <li><em>00:27</em>熨贴在你身边</li>
		  <li><em>00:32</em>静静看着流光飞舞</li>
		  <li><em>00:37</em>那风中一片片红叶</li>
		  <li><em>00:42</em>惹心中一片绵绵</li>
		  <li><em>00:51</em>半醉半醒之间</li>
		  <li><em>00:56</em>再忍笑眼千千</li>
		  <li><em>01:01</em>就让我像云中飘雪</li>
		  <li><em>01:06</em>用冰清轻轻吻人脸</li>
		  <li><em>01:12</em>带出一波一浪的缠绵</li>
		  <li><em>01:18</em>留人间多少爱</li>
		  <li><em>01:23</em>迎浮生千重变</li>
		  <li><em>01:28</em>跟有情人 做快乐事</li>
		  <li><em>01:33</em>别问是劫是缘</li>
		  <li><em>01:40</em>Music</li>
		  <li><em>02:24</em>像柳丝像春风</li>
		  <li><em>02:29</em>伴着你过春天</li>
		  <li><em>02:34</em>就让你埋首烟波里</li>
		  <li><em>02:39</em>放出心中一切狂热</li>
		  <li><em>02:45</em>抱一身春雨绵绵</li>
		</ul>
	</section>
</section>

<script type="text/javascript">
var audioData = [];
var index = 0;
var mode = "circle";

var audio = document.getElementById("musicBox");

var play = document.getElementById("MusicPlay");
var next = document.getElementById("MusicNext");
var prew = document.getElementById("MusicPrew");
var show = document.getElementById("music_player_desc");
var show = document.getElementById("music_player_desc");
var circle = document.getElementById("MusicCircle");
var single = document.getElementById("MusicSingle");
var muted = document.getElementById("music_player_muted");
var volume = document.getElementById("music_player_volume");
var progress = document.getElementById("music_player_prog");
var prog = document.getElementById("music_player_prog").getElementsByTagName("em")[0];
var lrc = document.getElementById("music_player_lrc");

var song = document.getElementById("music_player_songs");
var as = song.getElementsByTagName("a");
var len = as.length;
	for (var n=0;n<len;n++){
		as[n].num = n;
		as[n].onclick = function(){
			cleanSongClass();
			index = this.num;
			playThis(this.href,this.innerHTML);
			this.parentNode.className += " now";
			//lrc.innerHTML = this.lang;
			return false;
		}
	}
	play.onclick = playStop;
	prew.onclick = playPrew;
	next.onclick = playNext;
	circle.onclick = function(){playMode(circle)};
	single.onclick =function(){playMode(single)};
	muted.onclick = playMuted;
	
	//音量控制
	var volumeSpan = volume.getElementsByTagName("span")[0];
	volumeSpan.onclick = function(event){
		 getWidth(this,event);
		 var v1 =  getWidth(this,event);
		 audio.volume = v1;
	}
	//进度控制
	progress.onclick = function(event){
		 getWidth(this,event);
		 var v1 =  getWidth(this,event);
		 audio.currentTime = audio.duration*v1;	
	}
	function playStart(){
		document.title = audio.title; 
		for (var n=0;n<len;n++){
			if (as[n].href == audio.src){
				as[n].parentNode.className += " now";
			}
		}
	}
	//上一首
	function playPrew(){
		cleanSongClass();
		var n;
		if (index>=1){
			n= (index - 1);
		}else{
			n = len - 1;
		}
		index = n;
		as[n].parentNode.className += " now";
		playThis(as[n].href,as[n].innerHTML)
	}
	//下一首
	function playNext(){
		cleanSongClass();
		var n = (index + 1)%len;
		index = n;
		as[n].parentNode.className += " now";
		playThis(as[n].href,as[n].innerHTML);
	}
	//结束时根据循环设置播放下一曲
	function playEnd(){
		if (mode == "single"){playThis(as[index].href,as[index].innerHTML)}
		else{playNext()}
	}
	//播放制定的src并介入title
	function playThis(src,title){
		audio.src = src;
		audio.title = title;
		audio.autoplay = true;
		show.innerHTML = "正在播放的是：" + title;
		document.title = title; 
		audio.load();
		audio.play();
		play.innerHTML = '暂停';
		lrc.innerHTML = SongWord[title];
	}
	//设置播放模式
	function playMode(obj){
		circle.className = circle.className.replace("now","");
		single.className = single.className.replace("now","");
		obj.className += " now";
		if (obj.className.indexOf("circle")>-1){mode = "circle"}
		if (obj.className.indexOf("single")>-1){mode = "single"}
	}
	//进度显示
	function showProg(){
		var div = document.getElementById("music_player_prog_data");
			div.innerHTML = ['<em>',timeFormat(audio.currentTime),'</em>/',timeFormat(audio.duration)].join("");
			prog.style.width = audio.currentTime/audio.duration*360 + "px";
	}
	//播放暂停
	function playStop(){
		if (audio.autoplay) {
			audio.pause();
			audio.autoplay = false;
			play.innerHTML = '播放';
		}else{
			audio.play();
			audio.autoplay = true;
			play.innerHTML = '暂停';
		}	
	}
	//静音
	function playMuted(){
		if (muted.innerHTML.indexOf("span")<0){
			audio.muted = true;
			muted.innerHTML = '<span>静音</span>';
		}else{
			audio.muted = false;
			muted.innerHTML = '静音';
		}
	}
	//清楚歌曲列表样式
	function cleanSongClass(){
		for (var n=0;n<len;n++){
			as[n].parentNode.className = "";
		}
	}
	//点击获取宽度
	function getWidth(obj,event){
		var event = event || window.event;
		var w1 = event.offsetX;
		var w = parseInt(obj.clientWidth);
		var em = obj.getElementsByTagName("em")[0];
			em.style.width = w1 + "px";
		return (w1/w);
	}
	//时间格式转化
	function timeFormat(time){
		var m1 = Math.floor(time/60)+"";
		if (m1.length<2){m1 = "0" + m1;}
		var m2 =  Math.floor(time - m1*60)+"";
		if (m2.length<2){m2 = "0" + m2;}
		var time = m1 + ":" + m2;
		return time;
	}
</script>
</body>
</html>
